/* global AFRAME, THREE */
AFRAME.registerComponent('balloon', {
  schema: {
    balloonTemplate: { default: '#balloon-template' },
    triggerKeyCode: { default: 'B' },
    startAngel: { type: 'number', default: 0 },
    endAngel: { type: 'number', default: 360 },
    minRadius: { type: 'number', default: 20 },
    maxRadius: { type: 'number', default: 25 },
    // x,z坐标和中间的标语适配
    centerPoint: {
      type: "vec3", default: {
        // x: 3.91995, y: 1.6, z: 10.11278
        // x: 0, y: 1.6, z: 0
        x: 0, y: 6, z: 0
      }
    }
  },

  init: function () {
    const self = this;
    const el = self.el;
    const sceneEl = el.sceneEl;
    const data = self.data;

    const countCtl = { startCount: 0, endCount: 20 };
    const timeCtl = { minTime: 1500, maxTime: 2000 };
    const sizeCtl = { minSize: 2, maxSize: 5 };
    const centerPoint = data.centerPoint,
      startAngel = data.startAngel,
      endAngel = data.endAngel,
      minRadius = data.minRadius,
      maxRadius = data.maxRadius;


    document.addEventListener('keyup', function (e) {
      if (e.key == data.triggerKeyCode) {
        console.log('ballonGenerationController');
        self.ballonGenerationController(countCtl, timeCtl, sizeCtl);
      }
    })

    // 需要Battle信号以生成气球
    // 每隔1秒，决定下次一定时间范围内生成气球
    // 传入值分别为气球总数范围startCount和endCount，随机生成时间范围minTime和MaxTime
    self.ballonGenerationController = function (countCtl, timeCtl, sizeCtl) {
      let increaseNumber = function () {
        const color = getRandomColor();
        const radius = getRandomArbitrary(sizeCtl.minSize, sizeCtl.maxSize);
        const ballon = self.setBalloon(color, radius);
        addElementToScene(sceneEl, ballon);
        console.log('ballon', ballon);
        countCtl.startCount++;
        // 一定范围内的随机时间生成气球
        const randomTime = getRandomArbitrary(timeCtl.minTime, timeCtl.maxTime);
        if (countCtl.startCount < countCtl.endCount) {
          setTimeout(increaseNumber, randomTime);
        } else {
          console.log('Done');
        }
      }
      setTimeout(increaseNumber, 1000);
    },

      self.setBalloon = function (color = "#FF0000", radius = 2) {
        const el = document.createElement('a-entity');
        el.setAttribute('networked', 'template:' + data.balloonTemplate);
        console.log('el before ',el);
        console.log('el before  material',el.getAttribute('material'));
        console.log('el before  color',el.getAttribute('color'));
        el.setAttribute('material', 'color', 'red');
        console.log('el after ',el);
        console.log('el after  material',el.getAttribute('material'));
        console.log('el after  color',el.getAttribute('color'));

        el.setAttribute('position', getRandomPosition_circle(centerPoint, startAngel, endAngel, minRadius, maxRadius));

        return el;
      }

  },
});
